<template>
  <el-card class="box-card" shadow="always"
  >
    <div slot="header" class="clearfix">
      <el-tag size="mini">{{ title }}</el-tag>
    </div>

    <el-table :data="auths" border stripe style="width: 100%"
              @selection-change="handleTableSelects"
    >
      <el-table-column type="selection"/>
      <el-table-column prop="id" label="ID"/>
      <el-table-column prop="name" label="名称"/>
    </el-table>

    <div class="box-card-sub-but">
      <el-button :key="title +'add'" size="mini" @click="loadList">添加</el-button>
      <el-button :key="title + 'remove'" size="mini" @click="removeAuth">移除</el-button>
    </div>

    <!-- 弹出框  -->
    <el-dialog
        :modal-append-to-body="true"
        :append-to-body="true"
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">

      <!--   列表   -->
      <el-table
          ref="multipleTable"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleDialogAdds">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="id"
            width="120">
          <!--          <template slot-scope="scope">{{ scope.row.id }}</template>-->
        </el-table-column>
        <el-table-column
            prop="name"
            label="名字"
            width="120">
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDialogSubmit">确 定</el-button>
      </span>
    </el-dialog>

  </el-card>

</template>

<script>

export default {
  name: "AuthObjectInner",
  props: {
    type: String,
    title: String,
    auths: {
      type: Array,
      default() {
        return [];
      },
    },
    doLoadList: {
      type: Function,  //Promise
      required: true
    },
  },
  data() {
    return {
      tableSelects: [],
      readyAdds: [],
      list: [],
      dialogVisible: false
    }
  },
  mounted() {

  },
  methods: {
    handleClose() {
      //console.log("关闭")
      this.dialogVisible = false
    },
    handleTableSelects(selects) {
      //console.log("select-changes",selects)
      this.tableSelects = selects;
    },
    handleDialogAdds(selects) {
      //console.log("确认添加", selects)
      this.readyAdds = selects;
    },
    handleDialogSubmit() {
      let auths = this.auths
      for (const ready of this.readyAdds) {
        if (!auths.some(e=>e.id===ready.id)){
          auths.push(ready)
        }
      }
      this.dialogVisible = false
    },

    removeAuth() {
      let arr = this.auths
      for (let i = arr.length - 1; i >= 0; i--) {
        for (const b of this.tableSelects) {
          if (arr[i].id === b.id) {
            arr.splice(i, 1)
          }
        }
      }
    },
    loadList() {
      this.doLoadList().then(res => {
        this.list = res.data
        //console.log("获取到的返回值", this.list)
        this.dialogVisible = true
        //console.log("初始化多选",this.auths)
        this.list.forEach(l => {
          //console.log("l",l)
          //console.log("this",this)
          const isSelect = this.auths.some(t=>t.id===l.id)
          //console.log("isSelect",isSelect)
          this.$nextTick(()=>{
            this.$refs.multipleTable.toggleRowSelection(l,isSelect);
          })
        })
      })
    }
  }
}

</script>


<style scoped>

.box-card {
  min-height: 300px;
  margin: 5px;
}

.box-card-sub-but {
  position: absolute;
  bottom: 10px;
}
</style>